import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:mokeng/utils/extension.dart';
import 'package:mokeng/widgets/widgets.dart';

import 'logic.dart';

//显示动画可参考StoreItemRecommend
class FoundView extends GetView<FoundController> {
  const FoundView({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child:  Column(
        children: [
          inputSearchWithCalender(),
          new Container(
            padding: EdgeInsets.symmetric(vertical: 20.0),// 为了保持美观给了上下价格20
            color: Colors.amber.withOpacity(0.2), // 为了验证动态撑开给了背景
            child: TestRoute(),// 主代码
          ),
          AnimatedOpacity(
            duration: const Duration(seconds: 2),
            curve: Curves.bounceInOut,
            opacity: 1,
            child: Center(
              child: Obx(() {
                return TweenAnimationBuilder(
                    duration: const Duration(seconds: 5),
                    tween: Tween(begin: 0.0, end: controller.big.value ? 1.0 : 0.0),
                    onEnd: () {
                      controller.big.value = !controller.big.value;
                    },
                    child: Text(
                      'Hello',
                      key: UniqueKey(),
                      style: TextStyle(fontSize: 60.sp),
                    ),
                    builder: (context, value, child) {
                      return Container(
                        width: 300.w,
                        height: 300.h,
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            begin: Alignment.bottomCenter,
                            end: Alignment.topCenter,
                            colors: const [Colors.red, Colors.white],
                            stops: [
                              value,
                              value >= 1.0
                                  ? 1.0
                                  : value == 0.0
                                  ? 0.0
                                  : value + 0.05
                            ],
                          ),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.black.withOpacity(0.5),
                              spreadRadius: 5,
                              blurRadius: 7,
                              offset: const Offset(0, 3), // changes position of shadow
                            ),
                          ],
                          borderRadius: 150.radius,
                          border: Border.all(color: Colors.black, width: 2),
                        ),
                        child: AnimatedSwitcher(
                          //可以实现控件之间的动画切换效果
                          duration: const Duration(milliseconds: 2000),
                          transitionBuilder: (child, animation) {
                            return FadeTransition(
                              //嵌套多种动画
                                opacity: animation,
                                child: child
                              // ScaleTransition(
                              //   scale: animation,
                              //   child: child,
                              // ),
                            );
                          },
                          child: child,
                        ),
                      );
                    });
              }),
            ),
          ),
          20.hGap,
          const BreathingWidget(),
        ],
      )
    );
  }
}

class TestRoute extends StatefulWidget {
  @override
  _TestRouteState createState() => _TestRouteState();
}

class _TestRouteState extends State<TestRoute> {
  double? width;

  Widget buildItem(item) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: const BorderRadius.all(Radius.circular(4.0)), // 圆角
        color: Colors.blueAccent.withOpacity(0.5),// item颜色
      ),
      height: 50.0, // 高度
      alignment: Alignment.center, // item文本剧中
      width: (width! - 80) / 5, // 宽度
      child: Text('模拟$item'),
    );
  }

  @override
  Widget build(BuildContext context) {
    width ??= MediaQuery.of(context).size.width;
    return Container(
      width: width! - 40, // 宽度容器算法
      margin: const EdgeInsets.symmetric(horizontal: 20.0),
      child: Wrap(
        spacing: 10.0,
        runSpacing: 10.0,
        children: [0, 1, 2, 3, 4, 5, 4, 5].map(buildItem).toList(),
      ),
    );
  }
}

/// 4-7-8呼吸法
class BreathingWidget extends StatefulWidget {
  const BreathingWidget({super.key});

  @override
  State<BreathingWidget> createState() => _BreathingWidgetState();
}

class _BreathingWidgetState extends State<BreathingWidget> with SingleTickerProviderStateMixin {
  late AnimationController animationController;
  late Animation animation1;
  late Animation animation3;

  String text = '呼入';

  /// 如果只执行一次：
  /// 还可以通过不指定AnimationController的duration通过一下代码实现
  ///     animationController.duration = const Duration(seconds: 4);
  ///     animationController.forward();
  ///     await Future.delayed(const Duration(seconds: 4));
  ///
  ///     await Future.delayed(const Duration(seconds: 7));
  ///
  ///     animationController.duration = const Duration(seconds: 8);
  ///     animationController.reverse();
  ///

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 20),
    )..addListener(() {
        if (animationController.value < 0.25 && text != '呼入') {
          setState(() {
            text = "呼入";
          });
        } else if (animationController.value > 0.7 && text != '呼出') {
          setState(() {
            text = "呼出";
          });
        } else if (text != '保持') {
          setState(() {
            text = "保持";
          });
        }
      });
    animation1 =
        Tween(begin: 0.0, end: 1.0).chain(CurveTween(curve: const Interval(0.0, 0.25))).animate(animationController);
    animation3 =
        Tween(begin: 1.0, end: 0.0).chain(CurveTween(curve: const Interval(0.7, 0.95))).animate(animationController);
    animationController.repeat();
  }

  @override
  void dispose() {
    super.dispose();
    animationController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: animationController,
      builder: (context, child) {
        double stop = animationController.value < 0.25 ? animation1.value : animation3.value;
        return Container(
          width: 300.w,
          height: 300.h,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.blue.shade200, width: 1),
            shape: BoxShape.circle,
            gradient: RadialGradient(
              colors: [Colors.blue.shade700, Colors.blue.shade100],
              stops: [stop, stop + 0.1],
            ),
          ),
          child: Center(
            child: AnimatedSwitcher(
              transitionBuilder: (child, animation) {
                return FadeTransition(
                  opacity: Tween(begin: 0.5, end: 1.0).animate(animation),
                  child: child,
                );
              },
              duration: const Duration(seconds: 1),
              child: Text(
                animationController.value < 0.25
                    ? '吸气'
                    : animationController.value > 0.7
                        ? '呼气'
                        : '保持',
                key: UniqueKey(),
                style: TextStyle(fontSize: 50.sp),
              ),
            ),
          ),
        );
      },
    );
  }
}
